<template>
	<div class="usercoupon">
		<div v-if="datas.list.length !== 0" class="tabbar">
			<van-tabbar :fixed="false" :placeholder="true">
				<van-tabbar-item v-for="(item, index) in datas.list" :key="index">
					<span>{{ item.title }}</span>
					<template #icon="props">
						<img :src="STATIC_URL + item.icon" v-if="item.icon != ''" />
						<SvgIcon v-else name="ele-PictureFilled"></SvgIcon>
					</template>
				</van-tabbar-item>
			</van-tabbar>
		</div>

		<div v-else>
			<van-tabbar
				v-model="datas.Highlight"
				:fixed="false"
				:placeholder="true"
				:border="datas.isShowBorder"
				:active-color="datas.activeColor"
				:inactive-color="datas.inactiveColor"
			>
				<van-tabbar-item icon="search" name="home">标签</van-tabbar-item>
				<van-tabbar-item icon="home-o">标签</van-tabbar-item>
				<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
				<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
				<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
			</van-tabbar>
		</div>
		<slot name="deles" />
	</div>
</template>

<script setup lang="ts" name="usercoupon">
import { ref } from 'vue';
import { STATIC_URL } from '/@/utils/config';
const props = defineProps({
	datas: {},
});

const name = ref();
</script>

<style scoped>
.usercoupon {
	position: relative;
	width: 100%;
	min-height: 50px;
}
</style>
